import { R, RX, $ } from "../lib/plugin";
// 一问一答组成了一个Talk,包括了ask,answer,tools
// dify中Talk的结构如下：
// {
//     "id": "2133fa48-128b-44b5-b4f9-75d08d0b79dd",
//     "conversation_id": "68de1e27-edcf-424c-9a83-5b0b6fbf7643",
//     "parent_message_id": null,
//     "inputs": {},
//     "query": "\u4f60\u597d",
//     "answer": "\u4f60\u597d\uff01\u6709\u4ec0\u4e48\u53ef\u4ee5\u5e2e\u52a9\u4f60\u7684\u5417\uff1f",
//     "message_files": [], //消息附件
//     "feedback": null,
//     "retriever_resources": [], //检索到的文档
//     "created_at": 1739415952,
//     "agent_thoughts": [], //agent使用的工具信息,需要在合适的位置渲染出来
//     "status": "normal",
//     "error": null
// }
// 其中，id为talk的唯一标识符，conversation_id为对话的唯一标识符，parent_message_id为上一消息的id，inputs为用户输入的消息，query为用户提问的消息，answer为机器人回答的消息，message_files为消息附件，feedback为用户反馈的消息，retriever_resources为检索到的文档，created_at为创建时间，agent_thoughts为机器人思考过程，status为talk的状态，error为错误信息。
// markdown会渲染answer
// 可以不断的为对应id的talk添加消息
class Talk {
  constructor(talk_id) {
    this.talk_id = talk_id;
    this.messages_id_list = [];
    this.messages = [];
  }
  addMessage(msg_id, message, avatar, name, time, content, tools) {
    // 向talk中添加一条消息
    this.messages.push(
      new Message(msg_id, message, avatar, name, time, content, tools)
    );
    this.messages_id_list.push(msg_id);
    return msg_id;
  }
  updateMessage(message_id, message, tools) {
    // 更新talk中某条消息
    // 根据message_id找到对应的message对象,然后更新message对象中的内容,然后渲染到页面上
    let id = this.messages_id_list.indexOf(message_id);
    this.messages[id].message += message;
    this.messages[id].tools = tools;
    this.messages[id].render();
  }
}
class Message {
  // message是Talk的最小单位,具有头像/名字/时间/内容/工具等信息
  constructor(
    id,
    parent_id,
    name,
    avatar,
    role,
    message,
    bubbles = null,
    tool = null,
    footer = null
  ) {
    //会先生成一个message对象,然后渲染到页面上,后续的消息Talk会根据id传递到对应的message对象中进行更新
    this.parent_id = parent_id; // 用于切换消息的上下文
    this.id = id;
    this.role = role;
    this.message = message;
    this.avatar = avatar;
    this.name = name;
    this.time = time;
    this.bubbles = bubbles;
    this.tool = tool; // 是一个工具的dom节点,会按顺序渲染到页面上
    this.footer = footer; // 是一个footer的dom节点,会渲染到页面上
  }
  message_dom = null;
  static createMessage(message) {
    let AssistantMessage = $(
      ```
      <li class='llm-chat-message ${message.role}' data-parent-id='${
        message.parent_id
      }' data-id='${message.id}'>
          <div class='llm-chat-message-bubble'>
            ${message.bubbles}
          </div>
          <div class='llm-chat-avatar'>
              <img src='${message.avatar}'>
          </div>
          <div class='llm-chat-content'>
              <div class='llm-chat-name'>${message.name}</div>
              <div class='llm-chat-message-content'>
                  <div class='llm-chat-message-text'>${message.message}</div>
                  <div class='llm-chat-message-tools'>
                    ${message.tool}
                  </div>
              </div>
              <div class='llm-chat-footer' style="display:${
                message.footer ? "block" : "none"
              }">${message.footer}</div>
          </div>
      </li>
        ```
    );
    return AssistantMessage;
  }
  renderMessage(dom) {
    // 给一个chat dom节点,就能往里面渲染message对象节点,该Message的后续消息都会渲染到该dom节点中
    this.message_dom = Message.createMessage(this);
    $(dom).append(this.message_dom);
    return this.message_dom;
  }
  streamPush(word) {
    // 实时推送消息,word为用户输入的消息
    this.message += word;
    this.message_dom.find(".llm-chat-message-text").text(this.message);
  }
}
